<template>
	<view class="audio-page">
		<view class="box-left">
			<image class="box-img" :src="image" mode="aspectFill"></image>
			<view class="page-btn" @click="clickAudio"><image :src="music_play ? stop_img : start_img" mode="widthFix"></image></view>
		</view>
		<view class="box-content">
			<view class="content-name">{{ title }}</view>
			<view class="progress">
				<text>{{ getMinuteTime(now_time) }}</text>
				<slider :value="(now_time / total_time) * 100" block-size="10" block-color="#FF3333" activeColor="#FF3333" @change="sliderChange"></slider>
				<text>{{ getMinuteTime(total_time) }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'WZS-Audio',
	props: ['music', 'image', 'title', 'autoplay'],
	data() {
		return {
			music_play: false,
			AUDIO: '',
			total_time: '',
			now_time: 0,
			timeupdata: '',
			interval: '',
			start_img:
				'',
			stop_img:
				''
		};
	},
	mounted() {
		this.playAudio();
	},
	methods: {
		// 播放音乐
		playAudio() {
			this.AUDIO = uni.createInnerAudioContext();
			this.AUDIO.src = this.music;
			if (this.autoplay) {
				this.AUDIO.autoplay = true;
				this.music_play = true;
				this.AUDIO.play();
			}
			this.interval = setInterval(() => {
				if (this.AUDIO.duration != 0 && !isNaN(this.AUDIO.duration)) {
					this.total_time = Math.round(this.AUDIO.duration);
					// console.log("音频时长",this.total_time)
					clearInterval(this.interval);
				}
			}, 100);
			this.timeupdata = setInterval(() => {
				// console.log(this.now_time/this.total_time*100)
				if (this.music_play) {
					this.now_time++;
					// console.log("当前时间",this.getMinuteTime(this.now_time))
					if (this.now_time >= this.total_time) {
						this.music_play = false;
						this.now_time = 0;
					}
				}
			}, 1000);

			this.AUDIO.onPlay(() => {
				this.$emit('onStatus', 1);
				console.log('onPlay');
			});
			this.AUDIO.onError(() => {
				this.$emit('onStatus', 0);
				console.log('onError');
			});
			this.AUDIO.onStop(() => {
				this.$emit('onStatus', 0);
				console.log('onStop');
			});
			this.AUDIO.onPause(() => {
				this.$emit('onStatus', 0);
				console.log('onPause');
			});
			this.AUDIO.onEnded(() => {
				this.$emit('onStatus', 0);
				console.log('onEnded');
			});
		},
		clickAudio() {
			if (this.music_play) {
				this.music_play = false;
				this.AUDIO.pause();
			} else {
				this.music_play = true;
				this.AUDIO.play();
			}
		},
		stopAudio(){
			if (this.music_play) {
				this.music_play = false;
				this.AUDIO.pause();
			}
		},
		// 拖动进度条
		sliderChange(e) {
			// console.log(e)
			let second = (e.detail.value / 100) * this.total_time;
			this.AUDIO.seek(second);
			this.now_time = second;
		},
		// 秒转换分秒
		getMinuteTime(data) {
			let minute = parseInt(data / 60);
			let second = parseInt(data % 60);
			if (minute.toString().length == 1) minute = `0${minute}`;
			if (second.toString().length == 1) second = `0${second}`;
			return `${minute}:${second}`;
		}
	},
	destroyed() {
		this.music_play = false;
		this.AUDIO.pause();
		clearInterval(this.timeupdata);
	}
};
</script>

<style lang="scss">
.audio-page {
	width: 660upx;
	height: 150upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 3upx 3upx 6upx #ccc;
	border-radius: 15upx;
	.box-left {
		width: 150upx;
		height: 150upx;
		position: relative;
		display: flex;
		.box-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
		}
		.page-btn {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 3;
			image {
				width: 50upx;
				height: 50upx;
				background-color: rgba($color: #000000, $alpha: 0.3);
				border-radius: 50%;
			}
		}
	}
	.box-content {
		width: 500upx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30upx;
		box-sizing: border-box;
		font-size: 24upx;
		.content-name {
			width: 100%;
			display: -webkit-box; /* 弹性盒模型 */
			-webkit-box-orient: vertical; /* 元素垂直居中*/
			-webkit-line-clamp: 1; /*  文字显示的行数*/
			overflow: hidden; /* 超出隐藏 */
		}
		.progress {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			slider {
				width: 80%;
			}
		}
	}
}
</style>
